<template>
	<view class="mine-container">
		<!-- 账户概览 -->
		<view class="section account-overview">
			<u-cell-group :title-style="{
				backgroundColor: 'transparent',
				padding: '16rpx 32rpx',
				margin: '0'
			}" :customStyle="{
				backgroundColor: 'transparent'
			}" title="账户概览">
				<u-cell
					title="水量余额"
					:value="waterBalance + '吨'"
					isLink
					@click="handleRecharge"
				>
					<template #icon>
						<u-icon name="account" size="32"></u-icon>
					</template>
				</u-cell>
				<u-cell
					title="家庭地址管理"
					:value="addressCount + '个地址'"
					isLink
					@click="handleAddress"
				>
					<template #icon>
						<u-icon name="home" size="32"></u-icon>
					</template>
				</u-cell>
				<u-cell
					title="电子水卡"
					isLink
					@click="handleWaterCard"
				>
					<template #icon>
						<u-icon name="scan" size="32"></u-icon>
					</template>
				</u-cell>
			</u-cell-group>
		</view>

		<!-- 用水档案 -->
		<view class="section water-records">
			<u-cell-group :title-style="{
				backgroundColor: 'transparent',
				padding: '16rpx 32rpx',
				margin: '0'
			}" :customStyle="{
				backgroundColor: 'transparent'
			}" title="用水档案">
				<u-cell
					title="月度账单"
					isLink
					@click="handleMonthlyBill"
				>
					<template #icon>
						<u-icon name="file-text" size="32"></u-icon>
					</template>
				</u-cell>
				<u-cell
					title="历史记录"
					isLink
					@click="handleHistory"
				>
					<template #icon>
						<u-icon name="calendar" size="32"></u-icon>
					</template>
				</u-cell>
			</u-cell-group>
		</view>

		<!-- 服务管理 -->
		<view class="section service-management">
			<u-cell-group :title-style="{
				backgroundColor: 'transparent',
				padding: '16rpx 32rpx',
				margin: '0'
			}" :customStyle="{
				backgroundColor: 'transparent'
			}" title="服务管理">
				<u-cell
					title="我的报修工单"
					:value="repairCount + '个进行中'"
					isLink
					@click="handleRepair"
				>
					<template #icon>
						<u-icon name="edit-pen" size="32"></u-icon>
					</template>
				</u-cell>
				<u-cell
					title="电子合同查阅"
					isLink
					@click="handleContract"
				>
					<template #icon>
						<u-icon name="eye" size="32"></u-icon>
					</template>
				</u-cell>
				<u-cell
					title="客服通道"
					:value="hasNewAnnouncement ? '有新公告' : ''"
					isLink
					@click="handleService"
				>
					<template #icon>
						<u-icon name="server-man" size="32"></u-icon>
					</template>
				</u-cell>
			</u-cell-group>
		</view>

		<!-- 系统设置 -->
		<view class="section system-settings">
			<u-cell-group :title-style="{
				backgroundColor: 'transparent',
				padding: '16rpx 32rpx',
				margin: '0'
			}" :customStyle="{
				backgroundColor: 'transparent'
			}" title="系统设置">
				<u-cell
					title="用量预警阈值设置"
					:value="warningThreshold + '吨'"
					isLink
					@click="handleWarningSettings"
				>
					<template #icon>
						<u-icon name="setting" size="32"></u-icon>
					</template>
				</u-cell>
			</u-cell-group>
		</view>

		<!-- 充值弹窗 -->
		<u-popup :show="showRecharge" mode="bottom" @close="showRecharge = false">
			<view class="recharge-popup">
				<view class="popup-header">
					<text>快速充值</text>
					<text class="close-btn" @click="showRecharge = false">×</text>
				</view>
				<view class="popup-content">
					<u-input
						v-model="rechargeAmount"
						type="number"
						placeholder="请输入充值金额"
					></u-input>
					<u-button type="primary" @click="confirmRecharge">确认充值</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 账户概览数据
			waterBalance: 50.5,
			addressCount: 2,
			
			// 服务管理数据
			repairCount: 1,
			hasNewAnnouncement: true,
			
			// 系统设置数据
			warningThreshold: 100,
			
			// 充值相关
			showRecharge: false,
			rechargeAmount: ''
		}
	},
	onLoad() {
		// 页面加载时获取数据
		this.fetchUserData()
	},
	methods: {
		// 获取用户数据
		fetchUserData() {
			// TODO: 从后端获取数据
		},
		
		// 账户概览相关方法
		handleRecharge() {
			this.showRecharge = true
		},
		handleAddress() {
			uni.navigateTo({
				url: '/pages/mine/address/index'
			})
		},
		handleWaterCard() {
			uni.navigateTo({
				url: '/pages/mine/water-card/index'
			})
		},
		
		// 用水档案相关方法
		handleMonthlyBill() {
			uni.navigateTo({
				url: '/pages/mine/monthly-bill/index'
			})
		},
		handleHistory() {
			uni.navigateTo({
				url: '/pages/mine/history/index'
			})
		},
		
		// 服务管理相关方法
		handleRepair() {
			uni.navigateTo({
				url: '/pages/mine/repair/index'
			})
		},
		handleContract() {
			uni.navigateTo({
				url: '/pages/mine/contract/index'
			})
		},
		handleService() {
			uni.navigateTo({
				url: '/pages/mine/service/index'
			})
		},
		
		// 系统设置相关方法
		handleWarningSettings() {
			uni.navigateTo({
				url: '/pages/mine/warning-settings/index'
			})
		},
		
		// 充值确认
		confirmRecharge() {
			if (!this.rechargeAmount) {
				uni.showToast({
					title: '请输入充值金额',
					icon: 'none'
				})
				return
			}
			
			// TODO: 调用充值接口
			uni.showLoading({
				title: '充值中...'
			})
			
			setTimeout(() => {
				uni.hideLoading()
				uni.showToast({
					title: '充值成功',
					icon: 'success'
				})
				this.showRecharge = false
				this.rechargeAmount = ''
				// 刷新余额
				this.fetchUserData()
			}, 1500)
		}
	}
}
</script>

<style lang="scss" scoped>
.mine-container {
	min-height: 100vh;
	background-color: #f5f5f5;
	
	.section {
		margin: 20rpx;
		background-color: #fff;
		border-radius: 12rpx;
		overflow: hidden;
		
		&:first-child {
			margin-top: 20rpx;
		}
	}
	
	.recharge-popup {
		padding: 30rpx;
		
		.popup-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 30rpx;
			
			text {
				font-size: 32rpx;
				font-weight: bold;

				&.close-btn {
					font-size: 48rpx;
					color: #666;
					padding: 0 20rpx;
				}
			}
		}
		
		.popup-content {
			.u-button {
				margin-top: 30rpx;
			}
		}
	}
}
</style>
